<template>
  <view v-if="showselected">
    <view class="tabbar">
      <view class="navigator">
        <view
          class="navigator-item"
          v-for="(item, index) in list"
          :key="item.pagePath"
          @click="switchTab(item, index)"
        >
          <div v-if="item.type == 'scan'">
            <div class="scan" @click="handleScan">
              <image src="/static/sys.png" />
              <view>扫码开台</view>
            </div>
          </div>
          <div v-else class="item">
            <img
              :src="item.iconPath"
              class="icon"
              v-if="selectedIndex !== index"
            />
            <img :src="item.selectedIconPath" class="icon" v-else />
            <text
              :class="['item-text', { 'text-active': selectedIndex === index }]"
              >{{ item.text }}</text
            >
          </div>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getUrlValue } from "../../untils/common";
import { queryShopPage } from "@/service/index";
export default {
  data() {
    return {
      selectedIndex: uni.getStorageSync("selectedIndex") || 0,
      showselected: true, // 是否在页面使用tarBar
      list: [
        {
          pagePath: "pages/index/index",
          iconPath: "/static/home.png",
          selectedIconPath: "/static/home-select.png",
          text: "首页",
        },
        // {
        //   pagePath: "pages/device/index",
        //   iconPath: "/static/tab/device.png",
        //   selectedIconPath: "/static/tab/device-hover.png",
        //   text: "设备",
        // },
        {
          type: "scan",
        },
        // {
        //   pagePath: "pages/air/index",
        //   iconPath: "/static/tab/shukong.png",
        //   selectedIconPath: "/static/tab/shukong-hover.png",
        //   text: "数控",
        // },
        {
          pagePath: "pages/home/index",
          iconPath: "/static/wd.png",
          selectedIconPath: "/static/wd-select.png",
          text: "我的",
        },
      ],
      saomaStoreId: null,
    };
  },
  methods: {
    // 左侧返回按钮调用
    switchTab(item, index) {
      if (item.type === "scan") {
        return;
      }
      console.log(this.selectedIndex);
      let url = "/" + item.pagePath;
      console.log(url);
      let pagePath = url;
      uni.switchTab({ url });
      this.list.forEach((v, i) => {
        if (item.pagePath === v.pagePath) {
          uni.setStorageSync("selectedIndex", index);
        }
      });
    },
    handleScan() {
      const that = this
      uni.scanCode({
        onlyFromCamera: true,
        success: function (res) {
          console.log(res.result);
          const q = decodeURIComponent(res.result);
          console.log(q, "q");
          if (q) {
            const t = getUrlValue(q, "t");
            const c = getUrlValue(q, "c");
            if (t == "1") {
              const arr = c.split("-");
              if (arr[0] == 2) {
                // 因为数据库存的是5，但是二维码已经打印了是2，转换一下
                arr[0] = 5;
              }
              that.saomaStoreId = arr[0];
              that.getFirstData()
              uni.setStorageSync("storeId", arr[0]);
              uni.navigateTo({
                url: `/pages/order/placeOrder?id=${arr[0]}&no=${c}`,
              });
            }
          }
        },
      });
    },
    getFirstData() {
      const params = {
        pageNo: 1,
        pageSize: 10,
      };
      queryShopPage(params).then((res) => {
        console.log(res);
        if (this.saomaStoreId) {
          const storeInfo = res.list?.filter((v) => {
            return v.id === this.saomaStoreId;
          })[0];
          uni.setStorageSync("store", storeInfo);
          uni.setStorageSync("mainStoreInfo", storeInfo);
          return;
        }
      });
    },
    init() {
      this.selectedIndex = uni.getStorageSync("selectedIndex") || 0;
    },
  },
};
</script>
<style lang='less' scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  z-index: 999;
  background: #fff;
  border-top: 2rpx solid #eee;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.navigator {
  display: flex;
  justify-content: space-between;
  width: 75%;
  margin: 0 auto;
  padding: 20rpx;
}

.navigator-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 50rpx;
  height: 100%;
  .item {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.item-text {
  margin-top: 6rpx;
  color: #777e86;
  font-size: 24rpx;
}

.text-active {
  color: #009a44 !important;
}

.icon {
  width: 50rpx;
  height: 50rpx;
}
.scan {
  position: relative;
  display: flex;
  align-items: center;
  width: 260rpx;
  height: 88rpx;
  background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
  border-radius: 44rpx;
  text-align: center;
  line-height: 54px;
  justify-content: center;
  color: #fff;
  image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }
}
</style>